<template>
    <div style="padding-top: 70px;">
        <div id="header">
            <div class="container">
                <div class="img-style"><a href="/"></a></div>                
                <div class="column">
                    <div class="left_side_nav">
                        <router-link
                            v-for="item of list" 
                            :key="item.id+'list'"
                            :to="{path:item.path}"                   
                        >{{item.name}}</router-link>
                    </div>
                    <div class="right_side_nav">
                        <div><i class="el-icon-search"></i></div>
                        <span class="bar">|</span>
                        <span class="loginTxt">登录</span>
                    </div>
                </div>
            </div>
        </div>        
    </div>
</template>

<script>
export default {
    name: 'Header',
    data () {
        return {
            list: [
                {id:1, name: '发现音乐', path:'/'},
                {id:2, name: '排行榜', path:'/songList'},
                {id:3, name: '歌单', path:'/playList'},
                {id:4, name: '歌手', path:'/songPeople'},
                {id:5, name: '视频', path:'/songVideo'},
                {id:6, name: 'MV', path:'/MV'}
            ],
        }
    },
    mounted() {
        // let res = await this.$api.getA();
        // console.log(res.data)
    },
    methods: {

    }
}
</script>

<style lang='scss' scoped>
@import '@/common/commonCSS/_yBase';

.flex {
    display: flex;
    justify-content: space-between;
}

#header {
    @extend .clearBlue;
    width: 100%;
    position: fixed;
    top: 0;
    font-size: 14px;
    .container {
        display: flex;        
        margin: 0 auto;
        padding: 0 15px;
        max-width: 1350px;
        height: 70px;

        .img-style {
            width: 170px;
            display: flex;
            align-items: center;
            margin-right: 30px;
            a {
                width: 100%;
                height: 70px;
                background-position: 0;
                background-repeat: no-repeat;
                background-size: 146px 26px;
                background-image: url(~@/assets/images/logo.png);
            }
        }

        // 中间栏目
        .column {
            width: 100%;
            @extend .flex;
            align-items: center;
            .left_side_nav {
                @extend .flex;                
                
                a {
                    color: #000;
                    margin: 15px;
                    cursor: pointer;
                }
                /* 当路由到哪里时，该类名就添加到对应的路由标签上 */
                .router-link-exact-active{
                    position: relative;
                    color: $bgColor;
                    &::before {
                        content: '';
                        position: absolute;
                        left: 50%;
                        bottom: -15px;
                        transform: translateX(-50%);
                        width: 4px;
                        height: 4px;    
                        border-radius: 10px;
                        background: $bgColor;
                    }
                }              
            }
            .right_side_nav {
                div {
                    width: 20px;
                    display: inline-block;
                    text-align: end;
                    .el-icon-search {
                        position: relative;
                        bottom: 0;
                        font-size: 15px;
                        transition: all 0.5s;
                    }                    
                    &:hover .el-icon-search{                        
                        bottom: 5px;
                        cursor: pointer;
                    }
                }
                .bar {
                    margin: 15px;
                }
                .loginTxt {
                    &:hover {
                        color: $bgColor;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

</style>
